
document.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('.zp-textarea-default-html').innerHTML = hljs.highlight(`<script src="http://zx4.com:8001/kits/webcomponents/form/textarea.js" type="module" defer></script>
<zp-textarea></zp-textarea>`,
    {language: 'xml'}
  ).value;
  document.querySelector('.zp-textarea-size-html').innerHTML = hljs.highlight(`<script src="http://zx4.com:8001/kits/webcomponents/form/textarea.js" type="module" defer></script>
<div style="width:100%">
  <zp-textarea rows="3" width="50%"></zp-textarea>
</div>`,
    {language: 'xml'}
  ).value;
  document.querySelector('.zp-textarea-maxlen-html').innerHTML = hljs.highlight(`<script src="http://zx4.com:8001/kits/webcomponents/form/textarea.js" type="module" defer></script>
<div style="width:100%;padding-bottom:8px">
  <zp-textarea 
    width="50%"
    maxlen="10" 
    showmaxlen="1"
    style="
      --zp-input-bgcolor:#151f32;
      --zp-input-border-color:#2f3b4c;
      --content:#fff;
    "
  ></zp-textarea>
</div>`,
    {language: 'xml'}
  ).value;
});